import './App.css';
import { Divider, List,Checkbox, Input } from 'antd';
import { useState } from 'react';
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];


const data = [
  '写代码',
  '吃饭',
  '睡觉',
  '看书',
  '打豆豆',
];

const TodoList = () => { 
  const did_count = 0
  const all_count = data.length
  const [checkedList, setCheckedList] = useState(defaultCheckedList);
  const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);

  const onChange = (list) => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };

  const onCheckAllChange = (e) => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };
return (
  <>
    <Divider orientation="left">TodoList</Divider>
    <List
      header={
        <Input placeholder='添加事项' ></Input>
      }
      bordered
      dataSource={data}
      renderItem={(item) => (
        <Checkbox.Group    style={{
      width: '100%',
    }}
    onChange={onChange} value={checkedList} 
  >
    <List.Item>
    <Checkbox value={item}>{item}</Checkbox>
    </List.Item>
  </Checkbox.Group>
        
      )}
    />
    <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
    已完成{did_count}/全部{all_count}
  </Checkbox>
  <Divider />
  <CheckboxGroup options={data} value={checkedList} onChange={onChange} />

  </>
)
  
};

export default TodoList;


